Dialog 為一個覆蓋在畫面上的視窗，用來顯示各式資訊。
在後臺顯示上會以表格顯示資料清單，針對詳細資料不多的情況下會透過編輯或新增的按鈕，叫起 Dialog 視窗加以編修。

基本使用如下：

<Button label="新增商品" @click="visible = true" />

<!-- 表格 - 清單 -->
<DataTable :value="products" removableSort tableStyle="min-width: 50rem">
  ...
</DataTable>

<!-- Dialog 新增/編輯視窗 -->
<Dialog v-model:visible="visible" modal header="新增商品" :style="{ width: '25rem' }">
  <div class="flex items-center gap-4 mb-4">
    <label for="prdName" class="font-semibold w-24">商品名稱</label>
    <InputText id="prdName" class="flex-auto" autocomplete="off" />
  </div>
  <div class="flex items-center gap-4 mb-8">
    <label for="quantity" class="font-semibold w-24">數量</label>
    <InputNumber id="quantity" class="flex-auto" autocomplete="off" />
  </div>
  <div class="flex justify-end gap-2">
    <Button type="button" label="取消" severity="secondary" @click="visible = false"></Button>
    <Button type="button" label="新增" @click="visible = false"></Button>
  </div>
</Dialog>

另可參考表單驗證一篇，針對表單再加入驗證機制。

Dialog position

提供 Dialog 顯示的預設位置，提供 position 屬性進行設定。包含 left、right、top、bottom、center、topleft、topright、bottomleft、bottomright。

p.s. Dialog 視窗預設可拖曳移動，可設定 draggable 為 false 固定位置。

<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :draggable="false">...</Dialog>

Maximizable

加上 maximizable 可將 Dialog 放大至佔滿整個螢幕，在 Dialog 內容過多時可搭配此屬性使用，

<Dialog v-model:visible="visible2" maximizable modal header="Header" :style="{ width: '50rem' }">...</Dialog>

Long Content

Dialog 針對內容超過可視高度範圍時，會自動出現 scorll 滾軸。

Without Modal

上述範例在 Dialog 視窗顯示時，背景會上一層具有透明度的遮罩，若不用顯示遮罩的話，把 Dialog 上的 modal 屬性移除即可。

template

若要客製 header 或 footer 的內容，可搭配 template 將內容進行客製，結構如下：

<Button label="Show" @click="visible3 = true" />

<Dialog v-model:visible="visible3" modal header="Edit Profile" :style="{ width: '25rem' }">
  <template #header>
    <div class="inline-flex font-bold items-center text-lg justify-center gap-2">
      編輯商品
      <span class="text-sm whitespace-nowrap">手錶</span>
    </div>
  </template>
  <div class="flex items-center gap-4 mb-4">
    <label for="prdName" class="font-semibold w-24">商品名稱</label>
    <InputText id="prdName" class="flex-auto" autocomplete="off" />
  </div>
  <div class="flex items-center gap-4 mb-8">
    <label for="quantity" class="font-semibold w-24">數量</label>
    <InputNumber id="quantity" class="flex-auto" autocomplete="off" />
  </div>
  <template #footer>
    <Button label="取消" text severity="secondary" @click="visible3 = false" autofocus />
    <Button label="儲存" outlined @click="visible3 = false" autofocus />
  </template>
</Dialog>

參考連結：https://primevue.org/dialog/